<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>编辑班级信息</title>
    <link href="/assets/images/favicon.ico" rel="icon">
    <link rel="stylesheet" href="/assets/libs/layui/css/layui.css"/>
    <script src="/assets/libs/layui/layui.js"></script>
</head>
<body>
<div style="padding: 20px;">
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">班级名称</label>
            <div class="layui-input-block">
                <input type="text" id="editClassName" name="className" required lay-verify="required"
                       placeholder="请输入班级名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">班主任</label>
            <div class="layui-input-block">
                <select id="editChargerId" name="chargerId" required lay-verify="required">
                    <option value="">请选择班主任</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="saveEdit">保存</button>
                <button type="button" class="layui-btn layui-btn-primary" id="cancelEdit">取消</button>
            </div>
        </div>
    </form>
</div>

<script>
    layui.use(['form', 'layer'], function () {
        const $ = layui.jquery;
        const form = layui.form;
        const layer = layui.layer;

        // 获取 URL 参数
        const params = new URLSearchParams(window.location.search);
        const classId = params.get('id');

        console.log("id:" + classId);

        // 初始化表单数据
        $.ajax({
            type: 'GET',
            url: '/class/detail',
            data: { classId: classId },
            dataType: 'json',
            success: function (res) {
                if (res.code === 0) {
                    $('#editClassName').val(res.data.className);
                    loadTeachers(res.data.chargerId);
                } else {
                    layer.msg('获取班级信息失败', { icon: 2 });
                }
            },
            error: function () {
                layer.msg('请求失败，请稍后再试', { icon: 2 });
            }
        });

        // 加载老师列表
        function loadTeachers(selectedId) {
            $.ajax({
                type: 'GET',
                url: '/teachers',
                dataType: 'json',
                success: function (res) {
                    if (res.code === 0) {
                        // 遍历生成下拉框选项，并默认选中班主任
                        const options = res.data.map(teacher =>
                            `<option value="${teacher.id}" ${teacher.id === selectedId ? 'selected' : ''}>${teacher.realName}</option>`
                        ).join('');

                        // 设置选项到下拉框
                        $('#editChargerId').html(options);

                        // 重新渲染下拉框
                        form.render('select');
                    } else {
                        layer.msg('加载老师列表失败', { icon: 2 });
                    }
                },
                error: function () {
                    layer.msg('请求失败，请稍后再试', { icon: 2 });
                }
            });
        }

        // 表单提交保存
        form.on('submit(saveEdit)', function (formData) {
            $.ajax({
                type: 'PUT',
                url: '/class/update',
                contentType: 'application/json', // 设置请求头为 JSON
                data: JSON.stringify({
                    id: classId,
                    className: $('#editClassName').val(),
                    chargerId: $('#editChargerId').val(),
                    chargerName: $('#editChargerId option:selected').text()
                }),
                dataType: 'json',
                success: function (res) {
                    if (res.code === 0) {
                        layer.msg('保存成功', { icon: 1 });
                        const index = parent.layer.getFrameIndex(window.name); // 获取当前 iframe 索引
                        parent.layer.close(index); // 关闭弹窗
                        parent.layui.table.reload('tableList'); // 刷新主表格
                    } else {
                        layer.msg(res.msg, { icon: 2 });
                    }
                },
                error: function () {
                    layer.msg('请求失败，请稍后再试', { icon: 2 });
                }
            });
            return false;
        });

        // 取消按钮逻辑
        $('#cancelEdit').click(function () {
            const index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        });
    });
</script>
</body>
</html>
